/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
/*b, u, i,*/
ol, ul, li,
dl, dt, dd, center,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0; 
	font-size: 100%;
	font: inherit;
/*	vertical-align: baseline; */
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}
/*
ol, ul {
	list-style: none;
}
*/
blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* Fin reset */

html.index {
    background-color: white;
    width: 100%;
    height: 100%;
}

#logo {
    height: 3em;
}

.banner {
    height: 3em;
    background-color: #F0F0F0;
}

.bannerText {
    font-family: 'Nunito', sans-serif;
    font-size: 3em;
    color: darkblue;
    vertical-align: top;
}

.banner {
    padding: 0.2em 0.1em;
}

.header {
    cursor: pointer;
}

.contacto {
    padding: 5em 0 0 5em;
}

#main {
    width: 76%;
}

.menu {
    float: right;
    width: 23%;
}

.user {
    display: block;
}

.margen {
    margin-bottom: 0.2em;
}

#main, .menu {
    padding-left: 0.3em;
}

html, body, input, textarea, select {
    font-family: Arial, sans-serif;
    font-size: medium;
}

textarea {
    resize: none;
    overflow: hidden;
}

input[type=radio], input[type=checkbox] {
    vertical-align: middle;
    margin: 3px;
}

img {
    vertical-align: middle;
    margin: 1px;
}

#draggable {
    position: relative;
    z-index: 0;
}

#droppable {
    position: relative;
    z-index: 1;
}

.mismaLinea{
    white-space: nowrap;
}

p {
    padding: 0.25em 0;
}

ol, ul {
    padding-left: 2em;
}

.listTitle {
    padding-left: 2em;
    padding-bottom: 0.3em;
}

li {
    padding-top: 0.3em;
}

td, th {
	padding: 0.5em;
}

th {
    font-weight: bold;
}

.separadoizq {
	padding-left: 1em;
}

.separadoder {
	padding-right: 1em;
}

.borde_1px td, .borde_1px th {
	border: 1px solid black;
}

.separado {
    padding-top: 1em;
}

.siguiente {
    padding-bottom: 1em;
}

.left {
    float: left;
}

.right {
    float: right;
}

.middle {
    width: 90%;
    height: 60%;
    /* Internet Explorer 10 */
    display:-ms-flexbox;
    -ms-flex-pack:center;
    -ms-flex-align:center;
    /* Firefox */
    display:-moz-box;
    -moz-box-pack:center;
    -moz-box-align:center;
    /* Safari, Opera, and Chrome */
    display:-webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;
    /* W3C */
    display:box;
    box-pack:center;
    box-align:center;
}

.center {
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.top {
    vertical-align: top;
}

.large {
    font-size: large;
}

.larger {
    font-size: larger;
}

.xl {
    font-size: x-large;
}

.xxl {
    font-size: xx-large;
}

.wide {
    width: 20em;
}

.oculto {
    visibility: hidden;
    -webkit-user-select: none;
}

.visible {
    visibility: visible;
    -webkit-user-select: text;
}

.excluido {
    display: none;
}

.block {
    display: block;
}

.inblock {
    display: inline-block
}

.clear {
	clear: both;
}

.felicitacion {
    font-style: italic;
    font-weight: bold;
    color: green;
}

.explicacion {
    font-weight: bold;
    color: red;
    cursor: default;
}

.reintentelo {
    font-style: italic;
    font-weight: bold;
    color: red;
    padding-top: 1em;
}

.noBullets {
    list-style-type: none;
	margin: 0;
	padding: 0;   
}

.absolute {
    position: absolute;
}

a.boton {
    background-color: #FAFAFA;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FAFAFA), color-stop(100%, #DDD));
    background-image: -webkit-linear-gradient(top, #FAFAFA, #DDD);
    background-image: -moz-linear-gradient(top, #FAFAFA, #DDD);
    background-image: -ms-linear-gradient(top, #FAFAFA, #DDD);
    background-image: linear-gradient(top, #FAFAFA, #DDD);
    border: 1px solid #AAA;
    color: black;
    margin: 2px;
    padding: 2px 6px;
    text-align: center;
    text-decoration: none;
    border-radius: 3px;
    cursor: default;
}

a.boton:active {
    background-color: #FAFAFA;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(100%, #DDD), color-stop(0%, #FAFAFA));
    background-image: -webkit-linear-gradient(top, #DDD, #FAFAFA);
    background-image: -moz-linear-gradient(top, #DDD, #FAFAFA);
    background-image: -ms-linear-gradient(top, #DDD, #FAFAFA);
    background-image: linear-gradient(top, #DDD, #FAFAFA);
}

a.boton:visited {
    color: black;
}

.disabled, a.disabled, a[disabled] {
    -webkit-user-select: none;
    pointer-events: none;
    color: gray !important;
}

.enabled, a.enabled, a[enabled] {
    pointer-events: auto;
    color: black !important;
}

a:visited {
    color: #00E;
}

.contenidos li {
    color: darkblue;
    padding: 0;
}

.contenidos li a {
    color: darkblue;
    width: 16.5em;
    display: block;
    padding: 4px;
    border: 1px solid #00F;
    text-decoration: none;
    border-radius: 3px;
} 

.contenidos li a:hover {
    background-color: #E0E0E0;
    color: #00F;
}

img.expanimada {
	border: 1px solid;
}

#menuhoriz ul li {
    display: inline;
}

#menuhoriz ul li {
    display: inline;
    padding: 2px 7px; /*Separar el texto*/
    margin: 5px; /* Separar los botones */
    background-color: #E4E4E4; /* Color de fondo */
}
#menuhoriz ul li:hover {
    background-color: #CCCCCC; /* Color de fondo sobre el boton */
    cursor: pointer; /* cambiar el aspecto del puntero */
}
#menuhoriz ul {
    /* Linea para delimitar la botonera */
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #E4E4E4;
}

#x {
    background-image: url("/img/Entorno/NAV/chrome.png");
}

@media only screen and (max-width : 60em) {
	html.index {
		width: 98%;		
	}

    ol, ul {
        padding-left: 2.5em;
    }

    #barra {
        border-top: 1px solid black;
    }
    
    #logo {
        height: 2.5em;
    }
    
    .banner {
        height: 3.5em;
    }
    
    .bannerText {
        font-size: 2.5em;
    }
    
    #main {
        width: 96%;
    }
    
    .menu {
        width: 99%;
        clear: both;
    }
    
    .user {
        display: inline;
    }
    
    .separadoder {
        width: 99%;
    }
    
    .contenidos {
        margin-bottom: 1em !important;
    }
    
    .contacto {
    	padding: 0;
    }
	
	.middle {
		display: inline;
	}
}

@media only screen and (max-width : 30em) {
    .banner {
        height: 3em;
    }
	
    #logo {
		display: none;
    }
	.bannerText {
        font-size: 2em;
    }
}

@media print {
    .menu {
        display: none;
    }

    .oculto {
        visibility: visible;
    }
	
	.ui-tooltip {
        visibility: hidden;
    }
}

#tooltip {
    text-align: center;
    color: black;
    background: white;
    position: absolute;
    z-index: 100;
    padding: 10px;
    font-size: 1.2em;
    border: 3px solid lightgray;
    border-radius: 5px;
}
